<template>
  <div>
    <el-space direction="vertical" :size="20">
      <h1>评论管理</h1>
      <el-table :data="comments" style="width: 100%">
        <el-table-column prop="content" label="内容" />
        <el-table-column prop="author.username" label="作者" />
        <el-table-column label="帖子">
          <template #default="scope">
            <a :href="this.$http.server_host + '/post/detail/' + scope.row.post.id" target="_blank">{{ scope.row.post.title
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="发布时间" width="180" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="danger" circle size="mini" @click="onDeleteCommentClick(scope.$index)">
              <el-icon>
                <delete />
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;">
        <el-pagination background layout="prev, pager, next" :total="total_count" :current-page="page"
          @current-change="onPageChanged">
        </el-pagination>
      </div>
    </el-space>

    <!-- 删除轮播图确认对话框 -->
    <el-dialog v-model="confirmDialogVisible" title="提示" width="30%">
      <span>您确定要删除这个评论吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onConfirmDeleteCommentClick">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import { Delete } from "@element-plus/icons";
export default {
  name: "CommentPage",
  data() {
    return {
      dele_index: 0,
      confirmDialogVisible: false,
      comments: [],
      total_count: 0,
      page: 1
    };
  },
  mounted() {
    this.GetCommentList(1)
  },
  methods: {
    GetCommentList(page) {
      this.$http.getcommentlist(page).then(result => {
        if (result['code'] == 200) {
          let data = result['data']
          this.comments = data['comment_list']
          this.page = data['page']
          this.total_count = data['total_count']
        }
      })
    },
    onDeleteCommentClick(index) {
      this.dele_index = index;
      this.confirmDialogVisible = true;
    },
    onConfirmDeleteCommentClick() {
      let comment = this.comments[this.dele_index];
      this.$http.deletecomment(comment.id).then(res => {
        if (res['code'] == 200) {
          this.comments.splice(this.del_index, 1)
          ElMessage.success("评论删除成功")
          this.confirmDialogVisible = false
        } else {
          ElMessage.info(res['message'])
        }
      });
    },
    onPageChanged(current_page) {
      this.GetCommentList(current_page)
    }
  },
  components: {
    Delete
  }
};
</script>

<style scoped>
.el-space {
  display: block;
}
</style>
